<template>
	<swipe-action :options="options" :index="index" @button="onStickyDelete">
		<view class="conversation_item" @click="onRoomJump">
			<image :src="itemData.toHeadImg" mode="aspectFill"></image>
			<view class="room_content" :class="{'noLine':index == 0}">
				<view class="room_info">
					<view class="room_name">
						<text>{{itemData.toName}}</text> 
					</view>
					<view class="time" v-if="itemData.messageTime">{{itemData.messageTime}}</view>
				</view>
				<view class="room_text">
					<view class="introduction" v-if="itemData.lastMessage">
						<text v-if="itemData.contentType == 'img'">[图片]</text>
						<view v-else-if="itemData.contentType == 'txt'">
							<text v-for="(item,index) of item.lastMessage" :key="index">
								<text v-if="item.type == 'img'">{{item.text}}</text>
								<text v-else="">{{item}}</text>
							</text>
						</view>
					</view>
					<text class="introduction" v-else="">暂无消息</text>
					<text class="badge" v-if="itemData.messageNum > 0">{{itemData.messageNum > 99 ? '+99': itemData.messageNum}}</text>
				</view>
			</view>
		</view>
	</swipe-action>
</template>
 
<script>
import swipeAction from "@/components/common/swipe-action"
export default {
	components: {swipeAction},
	props: {
		item: {
			type: Object,
			default: function() {
				return {};
			}
		},
		index:{
			type: Number,
			default: function() {
				return 0;
			}
		}
	},
	data() {
		return {
			itemData:{},
			options: [
                {
                    text: '删除',
                    style: {
                        backgroundColor: '#ff5353',
                        color:"#FFF"
                    }
                },
            ]
		};
	},
	created() {
		this.itemData = this.item;
	},
	watch:{
		item(val){
			this.itemData = val;
		}
	},
	//方法
	methods: {
		onRoomJump(){
			uni.navigateTo({
				url:'/pages/message/serviceChat?shopType=1501&objId='+this.itemData.shopId+'&roomName='+this.itemData.toName
			});
		},
		onStickyDelete(e){
			uni.showModal({
			    title: "提示",
		        content: "确定要删除吗？",
		        success: (res) => {
		            if(res.confirm){
		                this.$http
		                	.get('api/im/session/v1/operate', {
		                        del: true,
		                        objId: this.itemData.objId
		                    })
		                	.then(res => {
		                		uni.showToast({
		                		    title: "删除成功"
		                		});
		                        this.$emit("delete", this.index);
		                	});
		            }
		        }
			})
		}
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.conversation_item {
	display: flex;
	background-color: #fff;
	> image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		flex-shrink: 0;
		margin: 30rpx 24rpx 30rpx 30rpx;
	}
	.room_content {
		width: calc(100% - 154rpx);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx 30rpx 30rpx 0rpx;
		border-top: solid 1px #f2f2f2;
		&.noLine {
			border-top:0rpx;
		}
		.room_info {
			display: flex;
			justify-content: space-between;
			.room_name {
				display: flex;
				width: calc(100% - 230rpx);
				text:nth-child(1) {
					font-size: 30rpx;
					color: #3d3d3d;
					@include toe();
				}
			}
			.time {
				font-size: 24rpx;
				color: #939599;
				flex-shrink: 0;
			}
		}
		.room_text {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.introduction {
				font-size: 26rpx;
				color: #999999;
				@include toe();
			}
			.room_but {
				width: 100rpx;
				height: 46rpx;
				background-color: #ffffff;
				border-radius: 6rpx;
				border: solid 1rpx #f66d52;
				font-size: 26rpx;
				color: #f66d52;
				text-align: center;
				line-height: 40rpx;
				flex-shrink: 0;
				margin-left: 15rpx;
			}
			.text {
				font-size: 26rpx;
				color: #f66d52;
				flex-shrink: 0;
				margin-left: 15rpx;
			}
			.badge {
				min-width: 40rpx;
				height: 40rpx;
				background-color: #f77a62;
				border-radius: 20rpx;
				text-align: center;
				line-height: 40rpx;
				padding: 0 11rpx;
				font-size: 24rpx;
				color: #ffffff;
				flex-shrink: 0;
				margin-left: 15rpx;
			}
		}
	}
}
</style>
